<!-- 商品列表 -->
<template>
	<view class="list-box">
	<!-- 	<view class="head-box">
			<ljshop-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
					<u-search placeholder="请输入关键字" @change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false"></u-search>
				</view>
			</ljshop-navbar>
		</view> -->
          <ljshop-filter @change="onFilter"></ljshop-filter>
		<view v-if="!isEmpty">
      <ljshop-waterfall-card ref="waterFall" :goodsList="goodsList"></ljshop-waterfall-card>
		</view>

		<!-- 缺省页 -->
		<ljshop-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></ljshop-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>
import shFilter from './components/sh-filter.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
export default {
	components: {
		shFilter
	},
	data() {
		return {
			isShow: false,
			isEmpty: false,
			goodsList: [],
			searchVal: '',
			page:1,
			keywords:this.$Route.query.keywords,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 0,
			order:'',
			hasMroe:true,
			rebate:0,
			isAdding:false,
			tempList:[],
			leftList: [],
			rightList:[],
			rightHeight:[],
			leftHeight: [],
			orderBy: 0,
		};
	},
	// 触底加载更多
	onReachBottom() {
			if (this.hasMroe) {
				this.page += 1;
				this.getGoodsList();
			}
	},
	onLoad() {
	     if (this.$Route.query.hasOwnProperty('keywords')) {
			  
			this.keywords = this.$Route.query.keywords;
			this.searchVal = this.$Route.query.keywords;
			this.getGoodsList();
		} else {
			this.getGoodsList();
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 500) {
			this.isShow = true;
		} else {
			this.isShow = false;
		}
	},
	methods: {
		pullTop() {
			uni.pageScrollTo({
				scrollTop: 0, //滚动到距离顶部为0
				duration: 500 //滚动时长
			})
		},

		onFilter(e) {
      this.orderBy = e;
      this.$refs.waterFall.setWaterfall();
			this.goodsList = [];
			this.page = 0;
			this.getGoodsList()
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = [];
			this.page = 0;
			this.lastPage = 0;
			this.keywords = this.searchVal;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},
		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
		},
		// 商品列表
		getGoodsList() {
			let that = this;
			this.isAdding =true
			that.loadStatus = 'loading';
			that.$http('goods.goodsearch', {
					regexp:that.keywords ,
					current:that.page,
					pageSize:10,
					orderBy:that.orderBy
				}
			).then(res => {
				for(var i in res.data){
					res.data[i].productImages = JSON.parse(res.data[i].productImages)
				}
				if(res.data.length < 10){
					that.loadStatus = 'nomore';
				}
				if(res.data.length>0){
					if(that.page == 0){
						if(res.data.length <  10){
							this.hasMroe = false;
						}
						this.hasMroe = true;
						that.goodsList = res.data;
					}else{
            that.goodsList = that.goodsList.concat(res.data)
					}
				}
				else{
					this.hasMroe = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}
.head-box {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 998;
	background: #fff;
}
</style>
